<template>
<div class='rcb-top'>
	<ul class="cube-list" ref="rcbTop">
		<li class="cube-item"
			v-for="(cube, index) in accessData"
			:key="index">
			<cube :cubeData='cube'
				:ref="`cube${index}`"></cube>
		</li>
	</ul>   
</div>
</template>

<script>
import { mapState } from 'vuex'
import Cube from '@/components/common/cube.vue'
export default {
components: {
	Cube
},
data() {
return {};
},
created() {},
mounted() {},
computed: {
  ...mapState(['dataSet']),
  accessData() {
    if(this.dataSet.rightCenterBottom){
      return this.dataSet.rightCenterBottom.rcbTop.accessData
    } else {
      return []
    }
  }
},
watch: {},
methods: {
	init() {
		let tl = new TimelineMax({})
		let tw1 = TweenMax.to(this.$refs.rcbTop, .3, {opacity: 1})
		tl.add(tw1, 0)
		for (let i = 0; i < this.accessData.length; i++) {
			tl.add(this.$refs[`cube${i}`][0].init(), '-=0.5')
		}
		return tl
	}
},
}
</script>
<style lang='scss' scoped>
  .rcb-top {
    width: 100%;
		height: 127px;
		padding: 20px 0 0 26px;
		.cube-list {
			display: grid;
			grid-template-columns: 50% 50%;
			grid-template-rows: repeat(2, 44px);
			grid-auto-flow: column;
			grid-row-gap: 12px;
		opacity: 0;

		}
  }
</style>